<template>
  <epgis-nav-container title="推荐给好友">
    <template #right>
      <div @click="invitationList"  class="layoutHorizontal" style="align-items: center;">
        <span style="font-size: 14px; ">邀请列表</span>
      </div>
    </template>
    <template #container>
      <div style= "height: 100%; width: 100%;background: #f6f6f6;" class="layoutVerticle">
        <div style= "margin-left: 16px; margin-right: 16px; margin-top: 16px; border-radius: 8px; height: 160px; background: white;" class="layoutVerticle">          
          <div style= "margin-top: auto; margin-bottom: auto;align-items: center;" class="layoutVerticle">
            <span style="">邀请好友注册，双方即可获得 i 豆</span>
            <span style="color:#8a8a8a;font-size: 12px;margin-top: 8px; padding-left: 10px; padding-right: 10px;">每成功邀请一位好友注册，双方即可获得10颗 i 豆。邀请越多，奖励越多~</span>
          </div>
        </div>
        <div style= " margin-left: 16px; margin-right: 16px; margin-top: 16px; border-radius: 8px; height: 160px; background: white;" class="layoutVerticle">       
          <span style="margin-left: auto; margin-right: auto;border-radius: 0px 0px 16px 16px; background: #ffd015; padding: 3px 20px;color: white;"> i 豆的作用</span>   
          <div style= "margin-top: auto; margin-bottom: auto;" class="layoutHorizontal">
            <div style= "align-items: center;flex: 1;" class="layoutVerticle">  
              <img src="@/assets/icon/mine/recommend.png"  style="height: 34px;width: 34px; "/>
              <span style="color:#515151; margin-top: 6px;">推荐嘉宾</span>
              <span style="color:#8a8a8a;font-size: 12px;">获得更多机会</span>
            </div>  
            <div style= "align-items: center;flex: 1;" class="layoutVerticle">  
              <img src="@/assets/icon/mine/lock.png"  style="height: 34px; width: 34px;"/>
              <span style="color:#515151; margin-top: 6px;">解锁嘉宾资料</span>
              <span style="color:#8a8a8a;font-size: 12px;">解锁嘉宾详细资料</span>
            </div>
            <div style= "align-items: center;flex: 1;" class="layoutVerticle">  
              <img src="@/assets/icon/mine/idcard.png"  style="height: 34px; width: 34px;"/>
              <span style="color:#515151; margin-top: 6px;">身份卡</span>
              <span style="color:#8a8a8a;font-size: 12px;">解锁谁喜欢我等</span>
            </div>       
          </div>
        </div>

        <van-button @click="confirmSubmit" type="primary" style="" class="shageBtn" :data-clipboard-text="contentUrl">
          分 享
        </van-button>
        
      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
import Clipboard from "clipboard";
export default {
  components: {},
  data() {
    return {
      userId:"",
      contentUrl:"",
    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {
    this.platformId = this.$route.query.platformId;
    this.userId = this.$route.query.userId;
    if(process.env.VUE_APP_ENVIRONMENT_TYPE == process.env.VUE_APP_ENVIRONMENT_DEVELOPMENT){
      this.contentUrl = "http://localhost:10022/#Login?operationType=1&inviter=" + this.userId;
    }else if(process.env.VUE_APP_ENVIRONMENT_TYPE == process.env.VUE_APP_ENVIRONMENT_PRODUCTION){
      this.contentUrl = "https://www.luckyda.cn/demo/assets/js/makeFriends/#Login?operationType=1&inviter=" + this.userId;
    }
  },
  computed: {
  },
  watch: {
  },
  methods: {
    confirmSubmit() {
      var clipboard = new Clipboard('.shageBtn');
      clipboard.on('success', function (e) {
        console.log("复制成功");
        Notify({
            type: "success",
            message: "已复制链接成功",
        });
        clipboard.destroy();
      });
      clipboard.on('error', function (e) {
        console.log("手机权限不支持复制功能");
        Notify({
            type: "danger",
            message: "手机权限不支持复制功能",
        });
        clipboard.destroy();
      });

    },

    invitationList(){
      this.$router.push({ name: 'InvitationList' });
    },









    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }


  /deep/.van-field__control {
    text-align: right;
  }


  .levelLayout {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0;
    font-size: 14px;
    color: #333;
    padding: 10px 16px;
  }
  .levellow {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    // @each $class, $width, $bgc, $text in (low, 25%, #e71b25, 低),(mid, 50%, #ffa840, 中), (high, 75%, #44ba00, 高), (highest, 100%, #44ba00, 很高)
    // {
    //   &.#{$class} {
    //     &::before {
    //       content: '#{$text}';
    //       background-color: $bgc;
    //       display: flex;
    //       align-items: center;
    //       height: 100%;
    //       width: $width;
    //       justify-content: center;
    //       color: #fff;
    //       font-size: 12px;
    //     }
    //   }
    // }
      &::before {
          content: '低';
          background-color: #e71b25;
          display: flex;
          align-items: center;
          height: 100%;
          width: 25%;
          justify-content: center;
          color: #fff;
          font-size: 12px;
        }
  }

  .levelmid {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    &::before {
        content: '中';
        background-color: #ffa840;
        display: flex;
        align-items: center;
        height: 100%;
        width: 50%;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }
  }

  .levelhigh {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    &::before {
        content: '高';
        background-color: #44ba00;
        display: flex;
        align-items: center;
        height: 100%;
        width: 75%;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }
  }

  .levelhighest {
    width: 200px;
    border-radius: 25px;
    overflow: hidden;
    height: 18px;
    background-color: #e3e3e3;
    &::before {
        content: '很高';
        background-color: #44ba00;
        display: flex;
        align-items: center;
        height: 100%;
        width: 100%;
        justify-content: center;
        color: #fff;
        font-size: 12px;
    }
  }

  .tip {
    padding: 10px 0;
    font-size: 14px;
    color: #333;
    padding: 10px 16px;
  }

  .shageBtn{
    margin-left: 12%; 
    margin-right: 12%;
    margin-top: 50px;
    border-radius: 8px;
    height: 36px;
  }




</style>